<template>
  <div>
    <div class="testListBox" v-for="item in newsData" :key="item.id" v-on:click="getTo(item.id)">
      <div class="normal flex-h" v-show="item.id">
        <div class="testLeft">
          <img v-lazy="item.cover" alt />
        </div>
        <div class="testRight flex1">
          <h3>{{item.title}}</h3>
          <div class="span1 flex-h">
            <span class="flex1 lables">
              <b
                v-for="(i,index) in item.labelNameArr"
                :key="i"
              >{{index===item.labelNameArr.length-1?i:i+" · "}}</b>
			  <b v-if="!item.labelNameArr">{{item.labelNames}}</b>
            </span>
            <span class="isAd" v-show="item.isAd">AD</span>
          </div>
        </div>
        
      </div>

    </div>
  </div>
</template>

<script>
export default {
  props: {
    newsData: Array
  },

  data() {
    return {};
  },
  computed: {},
  mounted: function() {},
  methods: {
    getTo(tids) {
      this.$emit("listenToNews", tids);
    }
  }
};
</script>


<style scoped lang="less">
.testListBox {
  height: 1.7rem;
  padding: 0 0.25rem;
  box-sizing: border-box;
  margin-bottom: 0.2rem;
  .testLeft {
    width: 2.25rem;
    height: 1.5rem;

    img {
      display: block;
      width: 100%;
      height: 1.5rem;
      background-image: url("~/static/header.png");
      background-size: 100% 100%;
      border-radius: 0.1rem;
    }
  }

  .testRight {
    padding-left: 0.3rem;
    box-sizing: border-box;
    h3 {
      display: block;
      height: 0.9rem;
      font-size: 0.3rem;
      font-family: PingFangSC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 0.45rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .span1 {
      .lables {
        overflow: hidden;
        height: 0.6rem;
        b {
          font-size: 0.24rem;
          font-family: PingFangSC;
          font-weight: 400;
          color: rgba(187, 187, 187, 1);
        }
      }
    }
    .isAd {
      width: 0.62rem;
      height: 0.32rem;
      background: rgba(247, 247, 250, 1);
      border-radius: 0.16rem;
      font-size: 0.22rem;
      font-family: PingFangSC;
      font-weight: 400;
      color: rgba(199, 199, 199, 1);
      line-height: 0.32rem;
      text-align: center;
    }


  }
}

</style>
